<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统设置</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body class="bg-gray-50">
    <!-- Header -->
    <div class="bg-white p-4 shadow-sm">
        <div class="flex items-center justify-between">
            <h1 class="text-xl font-semibold text-gray-800">系统设置</h1>
            <div class="flex items-center space-x-2">
                <button class="p-2 text-gray-600 hover:text-gray-800">
                    <i class="fas fa-question-circle"></i>
                </button>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="p-4 space-y-4">
        <!-- User Profile -->
        <div class="bg-white rounded-lg shadow-sm p-4">
            <div class="flex items-center space-x-4">
                <div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center">
                    <i class="fas fa-user text-2xl text-blue-600"></i>
                </div>
                <div>
                    <h2 class="text-lg font-medium text-gray-800">张工程师</h2>
                    <p class="text-sm text-gray-500">设备维护工程师</p>
                </div>
            </div>
        </div>

        <!-- Settings Menu -->
        <div class="bg-white rounded-lg shadow-sm">
            <div class="divide-y divide-gray-100">
                <a href="#" class="flex items-center justify-between p-4 hover:bg-gray-50">
                    <div class="flex items-center space-x-3">
                        <i class="fas fa-bell text-blue-600"></i>
                        <span class="text-gray-800">通知设置</span>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </a>
                <a href="#" class="flex items-center justify-between p-4 hover:bg-gray-50">
                    <div class="flex items-center space-x-3">
                        <i class="fas fa-shield-alt text-green-600"></i>
                        <span class="text-gray-800">安全设置</span>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </a>
                <a href="#" class="flex items-center justify-between p-4 hover:bg-gray-50">
                    <div class="flex items-center space-x-3">
                        <i class="fas fa-database text-purple-600"></i>
                        <span class="text-gray-800">数据管理</span>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </a>
                <a href="#" class="flex items-center justify-between p-4 hover:bg-gray-50">
                    <div class="flex items-center space-x-3">
                        <i class="fas fa-sync text-yellow-600"></i>
                        <span class="text-gray-800">系统更新</span>
                    </div>
                    <div class="flex items-center space-x-2">
                        <span class="text-sm text-gray-500">v1.2.0</span>
                        <i class="fas fa-chevron-right text-gray-400"></i>
                    </div>
                </a>
            </div>
        </div>

        <!-- System Info -->
        <div class="bg-white rounded-lg shadow-sm p-4">
            <h2 class="text-lg font-medium text-gray-800 mb-4">系统信息</h2>
            <div class="space-y-3">
                <div class="flex justify-between">
                    <span class="text-gray-600">系统版本</span>
                    <span class="text-gray-800">v1.2.0</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-600">最后更新</span>
                    <span class="text-gray-800">2024-03-15</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-600">数据同步</span>
                    <span class="text-green-600">正常</span>
                </div>
            </div>
        </div>

        <!-- Logout Button -->
        <button class="w-full py-3 bg-red-50 text-red-600 rounded-lg font-medium hover:bg-red-100">
            退出登录
        </button>
    </div>
</body>
</html> 